<template>
  <div class="all">
    <h2>什么是vueUse</h2>
    <h4>VueUse 是 Anthony Fu 的一个开源项目，它为 Vue 开发人员提供了大量适用于 Vue 2 和 Vue 3 的基本 Composition API 实用程序函数。</h4>
    <el-link type="primary" @click="open('https://vueuse.org/')">官网地址：https://vueuse.org</el-link>
    <div>如果你想查看每个实用程序的完整列表，我绝对建议你查看官方文档。但总结一下，VueUse 中有 9 种函数。</div>
<VueDragResize :isResizable="false"  :isDraggable="true" :x="x" :y="120">
    <div id="" class="el-submenu-div">
      <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
      </el-radio-group>
      <el-menu default-active="1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
        <el-submenu :index="index" v-for="(item, index) in meunList" :key="index">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>{{ item.name }}</span>
          </template>
          <el-menu-item-group>
            <template slot="title">
              {{ item.title }}
            </template>
            <el-menu-item :index="1 + '-' + it.name" v-for="it in item.value" :key="it.name">
              <el-link type="primary" @click="openAction(it.component)">{{ it.name }}</el-link>
            </el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </el-menu>
    </div>
</VueDragResize>
    <component :is="component"></component>

  </div>
</template>

<script>
import { meun } from '@/assets/js/vueUse.js';
import { useMouse } from '@vueuse/core';
import VueDragResize from 'vue-drag-resize' //缩放、拖拽
import UseInterval from '@/components/VueUse/Animation/useInterval.vue';
import UseTimeout from '@/components/VueUse/Animation/useTimeout.vue';
import UseTransition from '@/components/VueUse/Animation/useTransition.vue';
import OnClickOutside from '@/components/VueUse/Sensors/onClickOutside.vue';

export default {
  name: 'vueUse',
  data() {
    return {
      activeNames: [],
      meunList: meun,
      counter: 0,
      direction: 'rtl',
      dialogTableVisible: false,
      title: '',
      isCollapse: false,
      component: '',
     x:document.body.clientWidth - 200,
y:0
    };
  },
  components: { UseInterval ,VueDragResize ,UseTimeout,UseTransition,OnClickOutside},
  mounted() {
    console.log('meun', meun);
    // const counter = useInterval(200)
    // console.log(counter)
    setTimeout(() => {
      const { x, y } = useMouse();
      console.log('x', x, 'y', y);
    }, 1200);
  },
  methods: {
    open(url) {
      window.open(url);
    },
    handleChange(val) {
      console.log(val);
    },
    handleOpen(key, keyPath) {
      console.log('handleOpen', key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log('handleClose', key, keyPath);
    },
    openAction(name) {
      this.$nextTick(() => {
        this.title = name;
        this.dialogTableVisible = false;
        this.component = name;
        console.log(this.title);
        console.log(this.dialogTableVisible);
      });
    },
     resize(newRect) {
                    this.width = newRect.width;
                    this.height = newRect.height;
                    this.top = newRect.top;
                    this.left = newRect.left;
                }
  }
};
</script>

<style scoped>
.all {
  padding: 10px;
}
.meun {
  position: fixed;
  top: 30px;
  right: 0;
  width: 360px;
  border: 1px solid;
}
.meun div {
  /* border-bottom: 1px solid; */
}
.el-submenu-div{
border: 1px solid;
}
</style>
